import React from 'react'
import { useNavigate } from 'react-router-dom'
import '../../css/dll/zui.scss'

export default function Zuisu() {
  const navigate = useNavigate();


  const refanPage = () => {
    navigate('/home/playcar');
  }
  const refreshPage = () => {
    navigate(0);
  }

  return (
    <div style={{
      width: '100%',
      height: '78rem',
      color: '#fff',
      position: 'absolute',
      backgroundImage: 'url(../img/bei.png)',
      backgroundSize: '100% 100%',
    }}>
      <div className="dll_top">
        <img style={{
          margin: '0.6rem',
          float: 'left',
        }} src='../imgs/youjian.png' alt="" onClick={refanPage} />
        <span className='dll_top_mid'>排行详情</span>
        <img className='dll_top_right' src='../imgs/fen.png' alt=""  onClick={()=>{}}/>
      </div>
          
      <div className='dll_zui'>
        <img src="../img/hei.png" alt="" />
        <span>.</span>   <label>最速车型排行榜</label>
      </div>
      <div>
        <div className="dll_zui_pai1">
          <span>AUDI</span><br />
          <span>R8 Racetrack</span>
        </div>
        <div className="dll_zui_pai2">
          <span>1</span>
        </div>
        <img className='dll_zuicar' src="../imgs/zui1.png" alt="" />
      </div>
      <div className='dll_z'>
        <div className="dll_zui2_wen">
          <span>Porsche</span><br />
          <span>911 GT3</span>
        </div>
        <div className="dll_zui2">
          <span>2</span>
        </div>
        <img className='dll_zui2_img' src="../imgs/zui2.png" alt="" />
      </div>
      <div className='dll_zs'>
        <div className="dll_zui3_wen">
          <span>FORD</span><br />
          <span>Shelby</span>
        </div>
        <div className="dll_zui3">
          <span>3</span>
        </div>
        <img className='dll_zui3_img' src="../imgs/zui3.png" alt="" />
      </div>
      <div className='dll_zui_picture'>
        <img className='dll_zui4' src="../imgs/sort4.png" alt="" />
        <img className='dll_zui5' src="../imgs/sort5.png" alt="" />
        <img className='dll_zui6' src="../imgs/sort6.png" alt="" />
        <img className='dll_zui7' src="../imgs/sort7.png" alt="" />
        <img className='dll_zui8' src="../imgs/sort8.png" alt="" />
        <img className='dll_zui9' src="../imgs/sort9.png" alt="" />
        <img className='dll_zui10' src="../imgs/sort10.png" alt="" />
      </div>
      <div className='dll_shua' onClick={refreshPage}>
        <img style={{ marginLeft: '1.2rem' }} src="../imgs/shua.png" alt="" /><br />
        <p style={{
          textAlign: 'center',
          marginTop: '0.2rem',
        }}>
          刷新
        </p>
      </div>
    </div>
  )
}